<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="busyPage" ng-controller="BusyController">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="data:;base64,iVBORw0KGgo=" brand-icon />
        <title config-title></title>
        <script>
            const viewData = {
                label: 'Loading...',
                autoFocusTab: false
            };
        </script>
        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=view-js"></script>
        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
        <style>
            [data-status='positive'] {
                color: var(--sapPositiveTextColor) !important;
            }

            [data-status='negative'] {
                color: var(--sapNegativeTextColor) !important;
            }

        </style>
    </head>

    <body class="bk-vbox bk-center--vertical" bk-scrollbar>
        <div class="bk-vbox bk-box--gap-xl bk-restrict-width--sm bk-full-width bk-padding-top-bottom--md" ng-hide="state.error">
            <h4 bk-title wrap="true" header-size="4" aria-label="page title" style="text-align: center;">Preparing the Instance</h4>
            <bk-list ng-if="jobs.length" class="bk-list-border">
                <bk-list-item ng-repeat="job in jobs track by $index">
                    <bk-loader ng-if="job.status === 'loading'"></bk-loader>
                    <bk-list-icon ng-if="job.status !== 'loading'" data-status="{{job.status}}" glyph="{{job.icon}}"></bk-list-icon>
                    <bk-list-title>{{::job.name}}</bk-list-title>
                </bk-list-item>
            </bk-list>
            <bk-busy-indicator-extended ng-if="!jobs.length" class="bk-fill-parent" size="l">Loading job list...</bk-busy-indicator-extended>
        </div>
        <bk-message-page glyph="sap-icon--error" ng-if="state.error">
            <bk-message-page-title>Encounterd an error!</bk-message-page-title>
            <bk-message-page-subtitle>Error retreiving the health status</bk-message-page-subtitle>
        </bk-message-page>
        <script>
            const busyPage = angular.module('busyPage', ['blimpKit', 'platformView']);
            busyPage.controller('BusyController', ($scope, $http) => {
                $scope.state = {
                    error: false,
                };
                const interval = setInterval(() => {
                    $http({
                        method: 'GET',
                        url: '/services/core/healthcheck'
                    }).then((healthStatus) => {
                        if (healthStatus.data.status === "Ready") {
                            clearInterval(interval);
                            window.location = '/home';
                        }
                        let jobs = [];
                        for (const [key, value] of Object.entries(healthStatus.data.jobs.statuses)) {
                            let job = new Object();
                            job.name = key;
                            switch (value) {
                                case "Succeeded":
                                    job.status = "positive";
                                    job.icon = "sap-icon--message-success"
                                    break;
                                case "Failed":
                                    job.status = "negative";
                                    job.icon = "sap-icon--message-error";
                                default:
                                    job.status = "loading";
                                    break;
                            }
                            jobs.push(job);
                        }
                        $scope.jobs = jobs.sort((x, y) => x.name > y.name ? 1 : -1);
                    }, (e) => {
                        console.error("Error retreiving the health status", e);
                        $scope.$evalAsync(() => { $scope.state.error = true });
                    });
                }, 1000);
            });
        </script>
        <theme></theme>
    </body>

</html>
